<template>
    <div class="container">
        <el-form ref="form" :model="form" label-position="left" :rules="rules">
            <div class="title-container">
                <h3>添加套餐信息</h3>
            </div>
            <el-form-item label="驾照类型:" prop="level_id">
                <el-select placeholder="请选择" v-model.number="form.level_id">
                    <el-option
                        v-for="item in list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="报考要求:" prop="requirement">
                <el-input type="textarea" v-model="form.requirement" :rows="8" style="width:60%;"></el-input>
            </el-form-item>
            <el-form-item label="套餐说明:" prop="description">
                <el-input type="textarea" v-model="form.description" :rows="8" style="width:60%;"></el-input>
            </el-form-item>
            <div class="button-container">
                <el-button type="primary" class="el-icon-edit" @click.prevent="add" :loading="loading">添加</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import {getNoPackageLevelList,addPackage} from '@/api/package'
export default {
    name: 'add',
    inject: ['reload'], //注入reload方法
    data () {

        return {
            list: [
                {id: '', name: '请选择'}
            ],
            loading: false,
            form: {
                level_id : '',
                requirement: '',
                description: ''
            },
            rules: {
                level_id:[
                    {required: true,message: '请选择驾照类型'},
                    {type: 'number',message: '驾照类型是数字'}
                ],
                requirement: [
                    {required: true, message: '请输入报考要求'},
                    {min: 10, max: 500, message: '报考要求字符长度在10到500之间'}
                ],
                description: [
                     {required: true, message: '请输入报考套餐'},
                    {min: 10, max: 500, message: '报考套餐字符长度在10到500之间'}
                ]
            }
        };
    },
    methods: {
       add() {
           this.$refs.form.validate(valid => {
               if (!valid) {
                   return false;
               }
               //this.loading = true;
               var data = {
                   level_id: this.form.level_id,
                   requirement : this.form.requirement,
                   package: this.form.description
               };
               addPackage(data).then(response => {
                    this.$message.success(response.msg);
                    this.loading = false;
                    this.reload();
               }).catch(() => {
                    this.loading = false;
               })
           });
       }
    },
    mounted () {
        getNoPackageLevelList().then(response => {
                for(let i in response.data) {
                    this.list.push(response.data[i]);
                }
        }).catch(() => {

        })
    }
}
</script>

<style lang="scss" scoped>
    .container {
        min-width: 100%;
        width: 100%;
        overflow: hidden;

        .el-form {
            border: 1px solid #F2F6FC;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            position: relative;
            width: 700px;
            max-width: 100%;
            margin: 10px auto;

            .title-container {
                width:100%;
                max-width: 100%;
                text-align: center;

                h3 {
                    font-size: 20px;
                }
            }

            .el-form-item {
                margin-left: 10%;
                .el-select {
                    width: 20%;
                }
            }

            .button-container {
                width:30%;
                max-width: 30%;
                margin: 0px auto;
                .el-button {
                    width: 100%;
                }
            }
        }
    }
</style>
